<!DocType html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script></script>
<!--    会导致加载本地相对路径错误,正常情况下加载 url资源没有问题-->
<!--    <base href="http://www.runoob.com/" target="_blank">-->


</head>
<body>

<!--书签功能-->
<a id="tips">提示部分</a>
<br>



<h1>h1 header</h1>
<p>中文是否乱码</p>
<a href="http://www.baidu.com">link</a>
<br/>
<a href="http://www.baidu.com" target="_blank">link_newWindow</a>

<br/>
<a href="html/html-colornames.html" target="_blank">baseLink</a>

<br/>
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
<br/>

<h1>这个标题</h1>
<font size="6">这是6号字体文本</font>
<p style="color: #0000FF">这是段路</p>

<!--下划线-->
<hr/>
<!--插入单个折行（换行）-->
<br/>


<!--  资源文件夹和html文件在同一个路径，下面2种方式 -->
<img src="./h5Resource2/mic.png">
<img src="h5Resource2/mic.png">

<br/>
<hr/>
<!--  上级文件夹 -->
<img src="../h5Resource1/videocall.png">

<br/>

<hr/>
<!--  资源不在工程目录，没有加载权限 -->
<img src="../../h5Resource/mic.png">

<!-- 这是一个注释 -->
<!--  绝对路径，资源不在工程目录，也没有加载权限 -->
<img src="/Users/handkoo/Downloads/sourceTree/h5Resource/mic.png">

<br/>

<hr/>
<!--  在线图片显示，另外img标签对gif图片不是直接支持，需要自定义处理 -->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597638291246&di=871682c789a\
7f2851b09dae524e5476f&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F013000001\
64186121366756803686.jpg" width="10%" height="10%">

<br/>

<hr/>
<p>base64-image</p>
<!--  base64数据直接显示 -->
<img src="" alt="" />

<br>

<!--默认情况下，浏览器通常会在 <div> 元素前后放置一个换行符。然而，您可以通过使用 CSS 改变这种情况。-->
<div style="color:#0000FF;height: 200px;width: 100px">
    <h3>这是一个在 div 元素中的标题。</h3>
    <p>这是一个在 div 元素中的文本。</p>
</div>

<div style="color:#0000FF">    <h3>这是一个在 div 元素中的标题。</h3>
    <p>这是一个在 div 元素中的文本。</p>
</div>


<br>

<div id="container" style="width:500px">

    <div id="header" style="background-color:#FFA500;">
        <h1 style="margin-bottom:0;">主要的网页标题</h1>
    </div>

    <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
        <b>菜单</b><br>
        HTML<br>
        CSS<br>
        JavaScript
    </div>

    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
        内容在这里
    </div>

    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
        版权 © runoob.com
    </div>

</div>

<iframe src="https://www.baidu.com" width="200" height="200"></iframe>

<!--书签功能-->
<a href="#tips">跳到提示部分</a>

<br>

<video id="video1" controls="controls" autoplay="autoplay">
<!--    视频文件-->
    <source id="mp4_src" src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
<!--    音频文件-->
    <source id="ogg_src" src="https://www.runoob.com/try/demo_source/mov_bbb.ogg" type="video/ogg">
</video>



</body>
</html>